import styles from './Methods.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { FC } from 'react'
import {
  Typography,
  Input,
  Image,
  Button as AntdButton,
  Tabs,
  TabsProps,
} from 'antd'
import { Card } from '@/components/universal/Card/Card'
import { ListResponsive } from '@/components/universal/ListResponsive/ListResponsive'
import { useNavigate } from 'react-router-dom'
import { IconFolder } from '@arco-design/web-react/icon'

const Methods = () => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const navigation = useNavigate()

  const items: TabsProps['items'] = [
    { key: '1', label: '全部' },
    { key: '2', label: '需求分析' },
    { key: '3', label: '功能设计' },
    { key: '4', label: '逻辑设计' },
    { key: '5', label: '原型设计' },
  ]

  return (
    <div {...styleClass(['layout'])}>
      <div {...styleClass(['header-layout'])}>
        <Typography.Text {...styleClass(['header-title'])}>
          创新方法
        </Typography.Text>
      </div>
      <div {...styleClass(['filter-layout'])}>
        <Tabs
          {...styleClass(['filter-tabs'])}
          defaultActiveKey="1"
          items={items}
        />
        <div {...styleClass(['filter-suffix-layout'])}>
          <Input.Search
            {...styleClass([], { width: '100%' })}
            placeholder="input search text"
            allowClear
          />
        </div>
      </div>
      <ListResponsive
        {...styleClass(['list-layout'], { gap: 16, minWidth: 400 })}
      >
        <MethodsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/200f7d49e6f4d2cf.png'}
        />
        <MethodsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/cb76a5f0d99b5af6.png'}
        />
        <MethodsCard
          imgUrl={'https://s3.bmp.ovh/imgs/2023/11/09/a0e75977178e7e1c.png'}
        />
      </ListResponsive>
    </div>
  )
}

export default Methods

interface IAssetsCard {
  imgUrl?: string
}
const MethodsCard: FC<IAssetsCard> = ({ imgUrl = '' }) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  return (
    <Card {...styleClass(['card-wrapper'])}>
      <div {...styleClass(['card-img-wrapper'])}>
        <Image width={'100%'} height={335} src={imgUrl} preview={false}></Image>
      </div>
    </Card>
  )
}
